<template>
  <div class="mayzy">
    <div class="head">
      <div>我的关注</div>
      <div class="meus">
        <span class="s1">全部</span>
        <span>音乐人</span>
        <span>朋友</span>
      </div>
    </div>
    <p>你关注的朋友已经<span class="s4">30</span>天没有动态了</p>
    <p>快去发现你的音乐好朋友，丰富你的关注</p>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.mayzy {
  height: 3.26rem;
  border-bottom: 1px solid #e7e5e6;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  padding-top: 0.36rem;
  font-weight: 800;
}
.head {
  display: flex;
  justify-content: space-between;
}
.head:first-child {
  font-size: 0.28rem;
  color: #323232;
}
.s1 {
  font-size: 0.24rem;
  color: #2c2c2c;
}
span:nth-of-type(2) {
  color: #908e8f;
  font-size: 0.24rem;
}
span:nth-of-type(3) {
  color: #908e8f;
  font-size: 0.24rem;
}
.s4 {
  font-size: 0.35rem;
  color: #2b2b2b;
}
.meus {
  width: 2.98rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.02rem;
}
p:nth-of-type(1) {
  font-size: 0.35rem;
  color: #2b2b2b;
  text-align: center;
  margin-bottom: 0.2rem;
  word-spacing: 0.03rem;
}
p:nth-of-type(2) {
  font-size: 0.25rem;
  color: #979596;
  text-align: center;
  word-spacing: 0.03rem;
}
</style>